var HTML = '<div class="sort_list"><ul>' +
  '<li class="sort_item"><a href="list.html"><i class="icon_sort_01"></i><span>手机数码</span></a></li>' +
  '<li class="sort_item"><a href="#"><i class="icon_sort_01"></i><span>手机数码</span></a></li>' +
  '<li class="sort_item"><a href="#"><i class="icon_sort_01"></i><span>手机数码</span></a></li>' +
  '<li class="sort_item"><a href="javascript:;"><i class="icon_sort_01"></i><span>手机数码</span></a></li>' +
  '</ul></div>';


export default function() {
  var nDiv = document.createElement('div');
  nDiv.className = 'sort';
  nDiv.innerHTML = HTML;
  document.body.appendChild(nDiv);
  move();
}

function move() {
  var ele = document.querySelector('.nav__icon_one'),
    sort = document.querySelector('.sort'),
    sortList = sort.querySelector('.sort_list'),
    item = sort.querySelectorAll('.sort_item');
  if (ele) {
    ele.addEventListener('click', function(ev) {
      sort.style.webkitTransition = '-webkit-transform 300ms ease-out';
      sort.style.transform = 'translate3d(0, 0px, 0px)';
      sort.style.zIndex = '9999';
    }, false);
    sort.addEventListener('click', function(ev) {
      sort.style.webkitTransition = '-webkit-transform 300ms ease-out';
      sort.style.transform = 'translate3d(-100%, 0px, 0px)';
      sort.style.zIndex = '9999';
    }, false);
    sortList.addEventListener('click', function(ev) {
      ev.stopImmediatePropagation();
    }, false);
    [].forEach.call(item, function(ele, index, arr) {
      ele.addEventListener('touchstart', function(ev) {
        [].forEach.call(item, function(ele, index, arr) {
          ele.classList.remove('sort_item_active')
        }, this);
        this.classList.add('sort_item_active');
      }, false)
    });
  }
}
